import React, { useState } from 'react';
import { TextInput, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Button, Switch, Text } from 'tsun-smart-ui';
import { useTranslation } from 'react-i18next';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';

const ZeroExportConfigScreen = () => {
  const { t } = useTranslation();
  const [zeroExportFunctionOn, setZeroExportFunctionOn] = useState(false);
  const [ratedPower, setRatedPower] = useState('')
  const [zeroExportOffset, setZeroExportOffset] = useState('')

  return (
    <View className="flex-1">
      <KeyboardAwareScrollView
        className="flex-1"
        contentContainerClassName="py-6 px-4 items-stretch"
      >
        <View className="flex-row justify-between items-center py-3 px-3 bg-text6 rounded-lg">
          <Text>
            {t('sys.app.zero.export.function', { defaultValue: '防逆流功能' })}
          </Text>
          <Switch
            value={zeroExportFunctionOn}
            onValueChange={setZeroExportFunctionOn}
          />
        </View>
        {zeroExportFunctionOn && (
          <>
            <Text className="mt-4 mb-2">
              {t('sys.app.zero.export.params.set', {
                defaultValue: '防逆流参数设置',
              })}
            </Text>
            <View className="rounded-lg bg-text6 px-3">
              <View className="flex-row justify-between items-center py-4">
                <Text>
                  {t('sy.app.station.rated.power', {
                    defaultValue: '电站额定功率',
                  })}
                </Text>
                <TextInput
                  placeholder={t('client.inputResourceIdsTip', {
                    defaultValue: '请输入',
                  })}
                  value={ratedPower}
                  onChangeText={setRatedPower}
                />
              </View>
              <View className="bg-line1 h-[1px]" />
              <View className="flex-row justify-between items-center py-4">
                <Text>
                  {t('sys.app.zero.export.offset', {
                    defaultValue: '防逆流功率偏移值',
                  })}
                </Text>
                <TextInput
                  placeholder={t('client.inputResourceIdsTip', {
                    defaultValue: '请输入',
                  })}
                  value={zeroExportOffset}
                  onChangeText={setZeroExportOffset}
                />
              </View>
            </View>
          </>
        )}
      </KeyboardAwareScrollView>
      <SafeAreaView edges={['left', 'right', 'bottom']} className="bg-text6 px-4 py-3">
        <Button title={t('common.confirmButtonText')} />
      </SafeAreaView>
    </View>
  );
};

export default React.memo(ZeroExportConfigScreen);
